<template>
  <div class="page-log">
    <div class="right">
      <Form ref="searchForm" inline>
        <FormItem style="margin-bottom:0">
          <Input v-model="search.account" clearable :placeholder="$t('page.system.log.search.account')" />
        </FormItem>
        <FormItem style="margin-bottom:0">
          <Button type="primary" @click="onSearch(1)">{{$t('button.search')}}</Button>
        </FormItem>
      </Form>
    </div>
    <Divider />
    <Table class="mt-15" :columns="columns" :data="logs.list" :loading="logs.loading">
      <template slot-scope="{ row }" slot="createTime">
        <Time :time="row.createTime" />
      </template>
    </Table>
    <div class="center mt-15">
      <Page :total="logs.total" :current="logs.page" :page-size="logs.size" show-sizer @on-change="onSearch" @on-page-size-change="onSearch(1)" />
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        search: {
          account: ''
        },
        columns: [
          { renderHeader: (h, col) => { return h('span', this.$t('page.system.log.tb.account')) }, key: 'account' },
          { renderHeader: (h, col) => { return h('span', this.$t('page.system.log.tb.path')) }, key: 'path' },
          { renderHeader: (h, col) => { return h('span', this.$t('page.system.log.tb.ip')) }, key: 'ip' },
          { renderHeader: (h, col) => { return h('span', this.$t('page.system.log.tb.createTime')) }, slot: 'createTime' },
        ],
        logs: {
          loading: false,
          page: 1,
          size: 10,
          total: 0,
          list: []
        },
      }
    },
    computed: {
      filters() {
        let that = this
        let filters = {}
        let filter
        for (let f in that.search) {
          filter = that.search[f]
          if (filter) filters[f] = filter
        }
        return filters
      }
    },
    created() {
      this.onSearch(1)
    },
    methods: {
      onSearch(page) {
        this.logs.page = page
        this.loadLogs()
      },
      loadLogs() {
        this.logs.loading = true
        this.$md.dispatch('operator_log', {
          page: this.logs.page,
          limit: this.logs.size,
          filters: this.filters
        }).then(data => {
          if (data.retCode === 1) {
            this.logs.total = data.count
            this.logs.list = data.data || []
          }
          this.logs.loading = false
        })
      },
    }
  }
</script>
